<template>
   <h3>数组变化侦听</h3>
   <button @click="addData">添加数据</button>
   <ul>
        <li v-for="(item, index) of names" :key="index">{{ item }}</li>
   </ul>
   <button @click="concatNums">合并数据</button>
   <h3>数组1</h3>
   <p v-for="(item, index) of nums1" :key="index">{{ item }}</p>
   <h3>数组2</h3>
   <p v-for="(item, index) of nums2" :key="index">{{ item }}</p>
</template>
<script>
export default {
    data() {
        return {
            names: ['John', 'Mike', 'yex'],
            nums1:[1,2,3,4,5],
            nums2:[6,7,8,9,10],
        }
    },
    methods: {
        addData(){
            //引起UI自动更新的方法
            //this.names.push('Tom');

            //不会引起UI自动更新的方法
            this.names.concat(['Tom']);
            console.log(this.names.concat(['Tom']))
        },
        concatNums(){
            this.nums1 = this.nums1.concat(this.nums2);
        }
    }
}

</script>